<template>
  <div class="main-container">
    <div class="top-panel flex-center column">
      <div class="search-panel flex-center elevation-2">
        <div class="search-form">
          <i class="fa fa-search"></i>
          <input type="text" class="search-input" @keydown="onInputKeydown">
        </div>
        <div class="notification">
          <i class="fa fa-bell fa-lg"></i>
        </div>
      </div>
    </div>

    <div class="middle-panel">
      <div class="carrousel-wrapper">
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561033154444&di=7e30761f8da3df03ff5e4bc43e9a7619&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180123%2Fd2a13160d0ef4004a2854dfc673ac9d7.jpeg"
          alt
        >
      </div>
      <div class="mission-wrapper">
        <router-link tag="div" to="/App/Missions" class="mission-item elevation-2">
          <img src="@/assets/icons/tasks.svg" alt>
          <span>Missions</span>
        </router-link>
        <router-link tag="div" to="/App/MyMissions" class="mission-item elevation-2">
          <img src="@/assets/icons/add-person.svg" alt>
          <span>My Missions</span>
        </router-link>
        <router-link tag="div" to="/Sub/Income" class="mission-item elevation-2">
          <img src="@/assets/icons/money-bag.svg" alt>
          <span>Balance</span>
        </router-link>
        <router-link tag="div" to="/Sub/Members" class="mission-item elevation-2">
          <img src="@/assets/icons/add-person.svg" alt>
          <span>Ambassadors</span>
        </router-link>
      </div>

      <div class="about-wrapper">
        <div class="about-item elevation-2">
          <img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561627624&di=f4cc97913ff6291f64cd5a285307a74d&imgtype=jpg&er=1&src=http%3A%2F%2Fs1.sinaimg.cn%2Flarge%2F002p6C6lty6Nfg0KolW80"
            alt
          >
          <span>About Shuaishuai</span>
        </div>
        <div class="about-item elevation-2">
          <img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561032906203&di=a19fcc09dbb8a04d452aefc93f3a63bb&imgtype=0&src=http%3A%2F%2Fpic.cifnews.com%2Fupload%2F201506%2F30%2F201506300835540563.jpg"
            alt
          >
          <span>Missions</span>
        </div>
      </div>
      <div class="vip-title">VIP Zone</div>
      <div class="carrosoul-wrapper">
        <cube-slide ref="slide" :data="items" @change="changePage">
          <cube-slide-item
            v-for="(item, index) in items"
            :key="index"
            @click.native="clickHandler(item, index)"
          >
            <!-- <a :href="item.url"> -->
              <img :src="item.image">
            <!-- </a> -->
          </cube-slide-item>
        </cube-slide>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Main extends Vue {
  private items = [
    {
      url: "http://www.didichuxing.com/",
      image:
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561033154444&di=672ddd75c63d51f77ec0a7d580fdd7cb&imgtype=0&src=http%3A%2F%2Fimg.cnmo-img.com.cn%2F1609_600x1000%2F1608085.jpg"
    },
    {
      url: "http://www.didichuxing.com/",
      image:
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561033154444&di=3a2945d8dbb825314ef79d3e964a0b7f&imgtype=0&src=http%3A%2F%2Foss.epaidai.com%2Fuploadpath%2F2018-12%2F201812131461_124654.jpeg%40%2521logo"
    },
    {
      url: "http://www.didichuxing.com/",
      image:
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561033154443&di=613f5027e0370da7d646a858851c0a93&imgtype=0&src=http%3A%2F%2Fpic.cifnews.com%2Fupload%2F201905%2F09%2F201905091115191337.jpg"
    }
  ];

  private changePage(current: number) {
    // console.log("当前轮播图序号为:" + current);
  }

  private clickHandler(item: any, index: number) {
    console.log(item, index);
  }

  private onInputKeydown(ev: KeyboardEvent) {
    console.log(ev.keyCode);
    let keyCode = ev.keyCode;
    if (keyCode === 13) {
      // 输入了enter键
      // alert(keyCode);
    }
  }
}
</script>


<style lang="less" scoped>
@import url(../../styles/variables.less);
@search-height: 2.6rem;
.main-container {
  background-color: #f1f1f1;
  position: relative;
  // padding-top: @search-height;
  .top-panel {
    // position: absolute;
    // top: 0;
    // left: 0;
    width: 100%;
    // height: @search-height;
    .search-panel {
      background: @primary;
      width: 100%;
      height: @search-height;

      .search-form {
        width: 84%;
        flex-basis: 84%;
        i.fa-search {
          position: absolute;
          left: 1.8rem;
          top: 0.8rem;
          color: #909090;
        }
        input.search-input {
          border-radius: 1rem;
          background: white;
          width: 100%;
          height: 1.6rem;
          box-sizing: border-box;
          padding: 2px 1rem 2px 1.8rem;
          -webkit-box-shadow: inset 0 0 3px 1px #b57c4ca3;
          box-shadow: inset 0 0 3px 1px #b57c4ca3;
              border: 0.8px solid #33333369;
          // border-radius:0.1px
          // &:focus {
          //   box-shadow: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12) !important;
          //   background: #d44;
          // }
        }
      }
      .notification {
        color: white;
        margin-left: 0.4rem;
      }
    }
  }
  .middle-panel {
    position: relative;
    background: white;
    // height: calc(100% - 2.6rem);
    // overflow-x: hidden;
    // overflow-y: auto;
    .carrousel-wrapper {
      width: 100%;
      height: 10rem;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .mission-wrapper {
      padding: 0.5rem 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: #f3f3f3;
      .mission-item {
        width: 24%;
        height: 7rem;
        background: #ffffff;
        border-radius: 8px;
        color: #555;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        align-items: center;
        box-sizing: border-box;
        padding-top: 1rem;
        font-size: 0.8rem;
        img {
          width: 2.4rem;
          height: 2.4rem;
        }
        span {
          width: 100%;
          background: #e8864c;
          height: 2rem;
          line-height: 2rem;
          color: white;
        }
      }
    }
    .about-wrapper {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .about-item {
        width: 50%;
        height: 7rem;
        line-height: 7rem;
        background: white;
        position: relative;
        img {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          filter: brightness(0.4);
        }
        span {
          z-index: 10;
          position: relative;
          color: white;
        }
      }
    }
    .vip-title {
      border-left: 3px solid @primary;
      text-align: left;
      padding: 0.4rem;
    }
    .carrosoul-wrapper {
      // height: 6rem;
      width: 100%;
    }
  }
}
</style>
